<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
<%--<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>--%>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script>
    <style>
        ::-webkit-scrollbar {
            display: none;
        }
        @font-face {
            font-family: "仓耳渔阳体 W03";font-weight: 400;src: url("//at.alicdn.com/wf/webfont/g0uW2CjOUYlu/AYMR1IrQDcCNKlhqM1HpF.woff2") format("woff2"),
        url("//at.alicdn.com/wf/webfont/g0uW2CjOUYlu/WkpzPxExmv6oLmuxa1ixN.woff") format("woff");
            font-display: swap;
        }
        @font-face {
            font-family: "仓耳渔阳体 W03";font-weight: 400;src: url("//at.alicdn.com/wf/webfont/g0uW2CjOUYlu/mbKHRcQwzc6Q4f8-aUvRG.woff2") format("woff2"),
        url("//at.alicdn.com/wf/webfont/g0uW2CjOUYlu/mkYuQC5mENPh7Nm-kFsUK.woff") format("woff");
            font-display: swap;
        }
    </style>
</head>
<body>
<div class="container mt-3">
    <br>
    <div id="accordion">
        <div class="card shadow-lg">
            <div class="card-header" id="div" style="text-align: center;cursor: pointer">
                <a class="btn" id="leave_info" data-bs-toggle="collapse" href="#collapseOne" style="box-shadow: none;font-size: 18px">
                    请假信息审核
                </a>
            </div>
            <div id="collapseOne" class="collapse show" data-bs-parent="#accordion">
                <div class="card-body">
                    <button type="button" id="leave_btn" data-bs-toggle="modal" data-bs-target="#myModal_leave" style="width: 0px;height: 0px;display: none"></button>
                    <table id="table" class="table table-hover" style="text-align: center;table-layout: fixed;">
                        <thead>
                            <tr>
                                <th style="width: 100px">编号(ID)</th>
                                <th style="width: 100px">申请人</th>
                                <th style="width: 100px">部门</th>
                                <th style="width: 200px">请假时间</th>
                                <th style="width: 300px">申请原因</th>
                                <th style="width: 90px">审核状态</th>
                            </tr>
                        </thead>
                        <tbody>
                            <c:forEach items="${leaves}" var="leave">
                                <tr class="tr" style="cursor: pointer" url="{'id':'${leave.id}','name':'${leave.name}','name_id':'${leave.name_id}','dept':'${leave.department}','start':'${leave.startTime}','end':'${leave.endTime}','reason':'${leave.reason}'}">
                                    <td height="55px" style="display:table-cell; vertical-align:middle;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">${leave.id}</td>
                                    <td height="55px" style="display:table-cell; vertical-align:middle;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">${leave.name}</td>
                                    <td height="55px" style="display:table-cell; vertical-align:middle;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">${leave.department}</td>
                                    <td height="55px" style="display:table-cell; vertical-align:middle;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">${leave.startTime} - ${leave.endTime}</td>
                                    <td height="55px" style="display:table-cell; vertical-align:middle;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">${leave.reason}</td>
                                    <c:choose>
                                        <c:when test="${leave.state==1}">
                                            <td height="55px" style="display:table-cell; vertical-align:middle;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"><a style="font-family: '仓耳渔阳体 W03';font-size: 28px;color:  #5cb85c">通过</a></td>
                                        </c:when>
                                        <c:when test="${leave.state==-1}">
                                            <td height="55px" style="display:table-cell; vertical-align:middle;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"><a style="font-family: '仓耳渔阳体 W03';font-size: 28px;color: #d9534f">不通过</a></td>
                                        </c:when>
                                        <c:otherwise>
                                            <td height="55px" style="display:table-cell; vertical-align:middle;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"><a style="font-family: '仓耳渔阳体 W03';font-size: 28px;color: #337ab7">待审核</a></td>
                                        </c:otherwise>
                                    </c:choose>
                                </tr>
                            </c:forEach>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <br>
</div>

<!-- 请假信息显示框 -->
<div class="modal fade" id="myModal_leave">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- 模态框头部 -->
            <div class="modal-header">
                <h4 class="modal-title">请假信息</h4>
                <button type="button" id="leave_close" class="btn-close" data-bs-dismiss="modal" style="box-shadow: none"></button>
            </div>
            <!-- 模态框内容 -->
            <div class="modal-body">
                <form class="row g-3">
                    <div class="col-md-1"></div>
                    <div class="col-md-5">
                        <label for="leave_staff" class="form-label">申请人</label>
                        <input type="text" class="form-control text-muted" id="leave_staff" style="background-color: white;box-shadow: none;cursor: default" readonly>
                    </div>
                    <div class="col-md-5">
                        <label for="leave_dept" class="form-label">所属部门</label>
                        <input type="text" class="form-control text-muted" id="leave_dept" style="background-color: white;box-shadow: none;cursor: default" readonly>
                    </div>
                    <div class="col-md-1"></div>
                    <div class="col-md-1"></div>
                    <div class="col-10">
                        <label for="leave_time" class="form-label">申请时间</label>
                        <input type="text" class="form-control text-muted" id="leave_time" style="background-color: white;box-shadow: none;cursor: default" readonly>
                    </div>
                    <div class="col-md-1"></div>
                    <div class="col-md-1"></div>
                    <div class="col-10">
                        <label for="leave_reason">申请原因</label>
                        <textarea class="form-control text-muted" rows="5" id="leave_reason" style="resize: none;background-color: white;cursor: default;box-shadow: none" readonly></textarea>
                    </div>
                    <div class="col-md-1"></div>
                </form>
            </div>
            <!-- 模态框底部 -->
            <div class="modal-footer">
                <button type="button" id="leave_agree" class="btn btn-primary" style="box-shadow: none">同意</button>
                <button type="button" id="leave_disagree" class="btn btn-danger" style="box-shadow: none">拒绝</button>
                <button type="button" id="leave_go_back" class="btn btn-secondary" style="box-shadow: none">撤销</button>
            </div>
        </div>
    </div>
</div>
<div class="alert alert-success fade show" id="agree" style="text-align:center;width: 360px;position: absolute;left: 550px;top: 30px;display: none">
    <strong>已批准！</strong>
</div>
<div class="alert alert-warning fade show" id="disagree" style="text-align:center;width: 360px;position: absolute;left: 550px;top: 30px;display: none">
    <strong>已拒绝！</strong>
</div>
</body>
<script>
    document.getElementById('div').onclick=function (){
        document.getElementById('leave_info').click()
        $.post("http://localhost:8080/web/leave/select",
            {id:1},
            function (resp){
                let style="<thead>"+"<tr>"+
                    "<th style='width: 100px'>编号(ID)</th>"+
                    "<th style='width: 100px'>申请人</th>"+
                    "<th style='width: 100px'>部门</th>"+
                    "<th style='width: 200px'>请假时间</th>"+
                    "<th style='width: 300px'>申请原因</th>"+
                    "<th style='width: 90px'>审核状态</th>"+
                    "</tr>"+"</thead>"+"<tbody>"
                $('#table').empty()
                for (let i = 0; i < resp.length; i++) {
                    style+="<tr class='tr' style='cursor: pointer' url=\"{'id':'"+resp[i].id+"','name':'"+resp[i].name+"','name_id':'"+resp[i].name_id+"','dept':'"+resp[i].department+"','start':'"+resp[i].startTime+"','end':'"+resp[i].endTime+"','state':'"+resp[i].state+"','reason':'"+resp[i].reason+"'}\">"+
                        "<td height='55px' style='display:table-cell; vertical-align:middle;white-space: nowrap;overflow: hidden;text-overflow: ellipsis'>"+resp[i].id+"</td>"+
                        "<td height='55px' style='display:table-cell; vertical-align:middle;white-space: nowrap;overflow: hidden;text-overflow: ellipsis'>"+resp[i].name+"</td>"+
                        "<td height='55px' style='display:table-cell; vertical-align:middle;white-space: nowrap;overflow: hidden;text-overflow: ellipsis'>"+resp[i].department+"</td>"+
                        "<td height='55px' style='display:table-cell; vertical-align:middle;white-space: nowrap;overflow: hidden;text-overflow: ellipsis'>"+resp[i].startTime+" - "+resp[i].endTime+"</td>"+
                        "<td height='55px' style='display:table-cell; vertical-align:middle;white-space: nowrap;overflow: hidden;text-overflow: ellipsis'>"+resp[i].reason+"</td>"+
                        "<td height='55px' style='display:table-cell; vertical-align:middle;white-space: nowrap;overflow: hidden;text-overflow: ellipsis'><a style=\"font-family: '仓耳渔阳体 W03';font-size: 28px\">"+(resp[i].state==1?"通过":(resp[i].state==-1?"不通过":"待审核"))+"</a></td>"+
                        "</tr>"
                }
                style+="</tbody>"
                $('#table').append(style)
                judge()
                table_click()
            },"json"
        )
    }
    //判断审核状态
    function judge(){
        $('.tr').each(function (index,element){
            function replaceAll(str, find, replace){
                return str.replace(new RegExp(find, 'g'), replace);
            }
            let url = replaceAll($(element).attr('url'),"\'", "\"");
            let json=JSON.parse(url)
            if(json.state==1){
                $(element).find('a').css('color','#5cb85c')
            }else if(json.state==-1){
                $(element).find('a').css('color','#d9534f')
            }else if(json.state==0){
                $(element).find('a').css('color','#337ab7')
            }
        })
    }
    //点击表格事件--请假审核
    table_click()
    function table_click(){
        let tr=document.getElementsByClassName('tr')
        for (let i = 0; i < tr.length; i++) {
            tr[i].onclick=function (){
                $('tr[i]').fadeToggle("slow");
                $('#leave_btn').click()
                function replaceAll(str, find, replace){
                    return str.replace(new RegExp(find, 'g'), replace);
                }
                let url = replaceAll($(this).attr('url'),"\'", "\"");
                let json=JSON.parse(url)
                //console.log(json)
                $('#leave_staff').val(json.name)
                $('#leave_dept').val(json.dept)
                $('#leave_time').val(json.start+" - "+json.end)
                $('#leave_reason').val(json.reason)
                function agree_disagree(state){
                    $.post("${pageContext.request.contextPath}/leave/update",
                        {id:json.id,name_id:json.name_id,start:json.start,end:json.end,reason:json.reason,mystate:state},
                        function (resp){
                            $('#leave_close').click()
                            if(resp=="1"){
                                $(tr[i]).find('a').css('color','#5cb85c')
                                $(tr[i]).find('a').text('通过')
                            }else if(resp=="-1"){
                                $(tr[i]).find('a').css('color','#d9534f')
                                $(tr[i]).find('a').text('不通过')
                            }else{
                                $(tr[i]).find('a').css('color','#337ab7')
                                $(tr[i]).find('a').text('待审核')
                            }
                        }
                    )
                }
                document.getElementById('leave_agree').onclick=function (){
                    agree_disagree(1)
                }
                document.getElementById('leave_disagree').onclick=function (){
                    agree_disagree(-1)
                }
                document.getElementById('leave_go_back').onclick=function (){
                    agree_disagree(0)
                }
            }
        }
    }
</script>
</html>
